<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>olympic</title>
    <link rel="stylesheet" href="./reset.css">

    <link rel="stylesheet" href="./index.css">

    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <script src="./bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

    <canvas class="star_canvas" ref="star_canvas"></canvas>
    <script src="./index.js"></script>

    <form class="row g-3 my-form  mx-auto px-5 py-4 border border-primary border-5 bg-white shadow" method="post">
        <div class="col-12">
            <img src="./assets/index/logo.png" class="img-fluid d-block mx-auto" alt="...">
        </div>
        <div class="col-12 mt-4 form-floating">
            <input name="user" id="floatingInputUser" type="text" class="form-control"
                oninput="handleInput('user',event)" placeholder="">
            <label for="floatingInputUser" class="form-label">请输入账号: admin(默认)</label>
        </div>
        <div class="col-12 mt-4 form-floating">
            <input name="pwd" type="password" id="floatingInputPwd" type="text" class="form-control"
                oninput="handleInput('pwd',event)" placeholder="">
            <label for="floatingInputPwd" class="form-label">请输入密码 :123456(默认)</label>
        </div>
        <div class="col-12 mt-5">
            <button type="button" class="btn btn-primary d-block mx-auto px-5" onclick="handleSubmit()">登录</button>
        </div>
    </form>


    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">温馨提示</strong>
                <small>刚刚</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                账号或密码输入错误，请重新输入
            </div>
        </div>
    </div>

    <script>
        const toastLiveExample = document.getElementById('liveToast')
        var user = ''
        var pwd = ''
        const handleInput = (key, event) => {
            // console.log(key, event.target.value);
            if (key == 'user') {
                user = event.target.value
            } else {
                pwd = event.target.value
            }
        }
        const handleSubmit = (e) => {
            if (user == 'admin' && pwd == '123456') {
                location.href = './pages/event/index.html'
            } else {
                const toast = new bootstrap.Toast(toastLiveExample)
                toast.show()
            }
        }
    </script>

</body>

</html>